<!DOCTYPE html>
<html>
<head>
    <title>Wave Propagation Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="200"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Set drawing styles
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;

    // --- Draw the x-axis ---
    const yAxis = 100;
    const xAxisStart = 50;
    const xAxisEnd = 450;
    
    // Draw the line
    ctx.beginPath();
    ctx.moveTo(xAxisStart, yAxis);
    ctx.lineTo(xAxisEnd, yAxis);
    ctx.stroke();

    // Draw the arrowhead
    ctx.beginPath();
    ctx.moveTo(xAxisEnd, yAxis);
    ctx.lineTo(xAxisEnd - 15, yAxis - 6);
    ctx.moveTo(xAxisEnd, yAxis);
    ctx.lineTo(xAxisEnd - 15, yAxis + 6);
    ctx.stroke();
    
    // Draw the 'x' label
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('x', xAxisEnd + 10, yAxis + 8);

    // --- Draw points A and B ---
    const posA = 280;
    const posB = 180;
    const tickHeight = 10;

    // Draw tick and label for A
    ctx.beginPath();
    ctx.moveTo(posA, yAxis - tickHeight / 2);
    ctx.lineTo(posA, yAxis + tickHeight / 2);
    ctx.stroke();
    ctx.font = '24px Times New Roman';
    ctx.fillText('A', posA - 8, yAxis + 30);

    // Draw tick and label for B
    ctx.beginPath();
    ctx.moveTo(posB, yAxis - tickHeight / 2);
    ctx.lineTo(posB, yAxis + tickHeight / 2);
    ctx.stroke();
    ctx.fillText('B', posB - 8, yAxis + 30);

    // --- Draw the velocity vector u ---
    const yVector = 60;
    const vectorEnd = 210;
    const vectorStart = 310;
    
    // Draw vector line
    ctx.beginPath();
    ctx.moveTo(vectorStart, yVector);
    ctx.lineTo(vectorEnd, yVector);
    ctx.stroke();

    // Draw vector arrowhead (pointing left)
    ctx.beginPath();
    ctx.moveTo(vectorEnd, yVector);
    ctx.lineTo(vectorEnd + 15, yVector - 6);
    ctx.moveTo(vectorEnd, yVector);
    ctx.lineTo(vectorEnd + 15, yVector + 6);
    ctx.stroke();

    // Draw the 'u' label
    ctx.font = 'italic 24px Times New Roman';
    ctx.fillText('u', (vectorStart + vectorEnd) / 2 - 5, yVector - 10);

</script>
</body>
</html>